<template>
    <el-form>
        <div>
            <div style="margin: 10px 0">
                <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            </div>

            <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'" max-height="550" show-summary
                      :row-class-name="rowClassName" :summary-method="sumMethod"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" prop="xh" type="index" width="50" align="center"></el-table-column>
                <el-table-column label="零件id" align="center" v-if="false">
                    <template slot-scope="scope">
                        <el-form-item>
                            <span>{{ scope.row.partId }}</span>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="零件名称" align="center">
                    <template slot-scope="scope">
                        <el-form-item>
                            <el-select v-model="scope.row.partName" clearable
                                       filterable @change="initRow(scope.row)">
                                <el-option v-for="item in partData" :key="item.id" :label="item.partName"
                                           :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="零件单位" align="center">
                    <template slot-scope="scope">
                        <el-form-item>
                            <span>{{ scope.row.partUnit}}</span>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="零件单价" align="center">
                    <template slot-scope="scope">
                        <el-form-item>
                            <span> {{ scope.row.partPrice.toFixed(2) }}</span>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="partCount" label="零件数量" align="center">
                    <template slot-scope="scope">
                        <el-form-item>
                            <el-input-number v-model="scope.row.partCount"
                                             :step=1 :min=0 :max=999 @change="sum(scope.row)"></el-input-number>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="partTotal" label="总价" align="center">
                    <template slot-scope="scope">
                        <el-form-item>
                            <span> {{ scope.row.partTotal.toFixed(2) }}</span>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-popconfirm
                                class="ml-5"
                                confirm-button-text='确定'
                                cancel-button-text='我再想想'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定删除吗？"
                                @confirm="del(scope.$index)"
                        >
                            <el-button type="text" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="添加货品" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false"
                       append-to-body>
                <!--            append-to-body去除遮罩层-->
                <el-form :model="partForm" label-width="120px" size="small"
                         style="width: 80%; margin: 40px 10px 15px 50px">
                    <el-form-item prop="orderUserPhone" label="添加行数">
                        <el-input-number v-model="hCount" :step="1"
                                         :max="999" placeholder="请输入要增加的行数"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button style="margin-top: 12px;" @click="cancel">取消</el-button>
                    <el-button style="margin-top: 12px;" @click="confirm">确认</el-button>
                </div>
            </el-dialog>

        </div>
    </el-form>

</template>
<script>
    export default {
        name: 'OrderStep2',
        data() {
            return {
                partData: [],
                tableData: [],
                dialogFormVisible: false,
                partForm: {
                    partId: '',
                    partName: '',
                    partUnit: '',
                    partPrice: 0,
                    partCount: 0,
                    partTotal: 0
                },
                orderPrice:0,
                new_date_json: {},
                xh:0,
                hCount:0
            }
        },
        props: ['active','customerId','orderId','order','customer'],
        created() {
            this.queryPart()
        },
        watch:{
        },
        methods: {
            initRow(row) {
                // console.log(row)
                row.partUnit = row.partName.partUnit
                row.partPrice = row.partName.partPrice
            },
            queryPart() {
                this.request.get("/part/findAll").then(res => {
                    this.partData = res.data
                })
            },
            save(dataArr){
                this.$nextTick(() => {
                    let orderId = ''
                    let customerId = ''
                    if(this.orderId ==='' || this.orderId === undefined){
                        orderId = this.order
                    }else{
                        orderId = this.orderId
                    }
                    if(this.customerId ==='' || this.customerId === undefined){
                        //Order
                        customerId = this.customer
                    }else{
                        //OrderDetail
                        customerId = this.customerId
                    }

                    for (let i = 0; i < dataArr.length; i++) {
                        dataArr[i].partName = dataArr[i].partName.partName
                        dataArr[i].orderId = orderId
                        dataArr[i].orderUserId = customerId
                    }
                    const param = {
                        "parts": dataArr
                    }
                    //向订单详细表写入
                    this.request.post("/orderDetail/save", param).then(res => {
                        if(res.code === 200){
                            this.$message.success(res.message)
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                })

            },
            del(index) {
                this.tableData.splice(index, 1)
            },
            handleAdd(count) {
                this.dialogFormVisible = true
                const dataArr = []
                for (let i = 0; i < count; i++) {
                    const data = {
                        partId:'',
                        partName: '',
                        partUnit:'',
                        partPrice:0,
                        partCount: 0,
                        partTotal:0,
                        orderId:'',
                        orderUserId:'',
                        status:'0'
                    }
                    this.tableData.push(data)
                }

            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            sum(row) {
                row.partTotal = row.partPrice * row.partCount
            },
            rowClassName({ row, rowIndex }) {
                row.xh = rowIndex + 1;
            },
            cancel(){
                this.hCount = 0
                this.dialogFormVisible = false
            },
            confirm(){
                this.handleAdd(this.hCount)
                this.dialogFormVisible = false
                this.hCount = 0
            },
            sumMethod({columns, data}){
                const sums = [];
                let orderPrice = 0
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = "合计";
                        return;
                    }
                    //calcProp 为需要计算的列的prop值的集合
                    const calcProp = ["partCount", "partTotal"];
                    if (calcProp.includes(column.property)) {
                        const values = data.map(item => Number(item[column.property]));
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                orderPrice = prev + curr
                                return orderPrice;
                            } else {
                                orderPrice = prev
                                return orderPrice;
                            }

                        }, 0);
                    }
                    if(column.property ==="partTotal"){
                        sums[index] = sums[index].toFixed(2)
                    }
                });
                this.orderPrice = orderPrice
                return sums;
            }

        }
    }
</script>
<style>
    .headerBg {
        background: #eee !important;
    }

    .dialog-footer {
        text-align: center;
    }

</style>